<template>
    <view class="content">
		<view class="content1">
			<view class="image-item" v-for="(item,index) in list" :key="index">
				<view class="image-content" @click="handleCLick(item)">
					<image style="width: 100%; height: 100%; background-color: #eeeeee;" :src="item.src"></image>
				</view>
				<view class="image-title">{{item.text}}</view>
			</view>
		</view>
    </view>
</template>

<script>
    import { mapState } from 'vuex'
	
    export default {
		data() {
			return {
				list: [
					{ text: '实时监测', id: 'realtimeMonitor',  src: '../../static/monitor.png'},
					{ text: '地图显示', id: 'mapDisplay', src: '../../static/map.png'},
					{ text: '记录查询', id: 'recordQuery', src: '../../static/search.png'},
					{ text: '数据统计', id: 'dataStatistics', src: '../../static/statistics.png'},
					{ text: '测站信息', id: 'stationInformation', src: '../../static/search.png'},
					{ text: '工情统计', id: 'engineeringStatistics', src: '../../static/statistics.png'},
				]
			}
		},
        computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
        onLoad() {
            if (!this.hasLogin) {
                this.loginVerify();
            }
	   
        },
		
		methods: {
			handleCLick(item) {
				// if (!this.hasLogin) {
				// 	this.loginVerify();
				// } else {
					uni.navigateTo({
					    url: `../${item.id}/${item.id}`
					});
				// }
			},
			
			loginVerify() {
				uni.showModal({
				    title: '未登录',
				    content: '您未登录，需要登录后才能继续',
				    showCancel: !this.forcedLogin,
				    success: (res) => {
				        if (res.confirm) {
							/**
							 * 如果需要强制登录，使用reLaunch方式
							 */
				            if (this.forcedLogin) {
				                uni.reLaunch({
				                    url: '../login/login'
				                });
				            } else {
				                uni.navigateTo({
				                    url: '../login/login'
				                });
				            }
				        }
				    }
				});
			}
		}
    }
</script>

<style>
	.content1 {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		padding: 0px 20upx;
	}
	
    .image-item {
		width: 252upx;
		height: 300upx;
		margin-bottom: 40upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	
	.image-content {
		width: 252rpx;
		height: 232rpx;
	}
</style>
